<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" class="allselect" >全选按钮
    <hr>
    <div class="item">
        <input type="checkbox">1<br>
        <input type="checkbox">2<br>
        <input type="checkbox">3<br>
        <input type="checkbox">4<br>
        <input type="checkbox">5<br>
        <input type="checkbox">6<br>
    </div>
    <script>
        // 1。全选的需求：点击全选的按钮，其他的复选框的选中状态和全选的状态一致 allselect.checked=true
        
        var allselect=document.querySelector('.allselect');//全选的元素对象
        var inps=document.querySelectorAll(".item input");//6个input的元素对象
        // console.log(allselect);
        // console.log(inps);
        
        allselect.onclick=function() {
            inps.forEach(function (input) {
                // console.log(input);
                input.checked=allselect.checked
            })
            // 点击全选按钮的时候，全选的状态赋值给其他的input框
            // allselect.checked=true
        }

        // 2.点击其他的复选框，如果复选框全部选中，全选也要被选中
        // 3.如果有任何一个复选框没有被选中，则全选不选中
        inps.forEach(function (input) {
            input.onclick=function(){//遍历添加事件
                var num=0;
                //遍历判断选中的input的个数,每次点击都要判断
                inps.forEach(function(checkinput){
                    // console.log(checkinput.checked);
                    if(checkinput.checked) num++;
                })
                allselect.checked= num===inps.length

                // if(num===inps.length){
                //     allselect.checked=true
                // }else{
                //     allselect.checked=false
                // }
            }
        })
    </script>
</body>
</html>